<template>
  <div id="app">
    <transition :name="fadeName">
        <router-view class="page"/>
    </transition>
    <nav class="foot">
      <router-link to="/">首页</router-link> |
      <router-link to="/about">关于</router-link> |
      <router-link to="/cart">购物车</router-link> |
      <router-link to="/mine">个人</router-link> 
    </nav>
   
  </div>
</template>
<script>
export default {
    data() {
        return {
            fadeName:"fade"
        }
    },
    watch: {
        $route(newVal,oldVal){
            console.log('新值'+newVal.meta.num);
            console.log('老值'+oldVal.meta.num);
            if(oldVal.meta.num - newVal.meta.num >0){
                // 后退
                console.log('后退');
                this.fadeName = 'back'

            }else{
                // 前进
                this.fadeName = 'fade'
                 console.log('前进');
            }
        }
    },
}
</script>
<style lang="scss">
#app{
    height: 100vh;
    overflow: hidden;
    position: relative;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.page{
   position: absolute;
   height:calc(100vh - 50px) ;
   top:0;
   left:0;
   width:100%;
}
.foot{
    position: fixed;
    bottom: 0;
    left:0;
    width:100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    
}
// 前进的动画  翻转
// 动画以什么进入
.fade-enter{
    transform: rotate(360deg) scale(0.1);
}
// 离开到某种状态
.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,.fade-leave-active{
   transition: all 1s linear;
}
// 后退动画   以什么状态进入
.back-enter{
   transform: translateX(-375px)
}
// 离开到某种状态
.back-leave-to{
    transform: translateX(0px)
}
.back-enter-active,.back-leave-active{
   transition: all 1s linear;
}
</style>
